<template>
  <div class="header">
    <div class="header-left">
      <span><i class="iconfont icon-fanhui"></i></span>
    </div>
      <input type="text" placeholder="输入城市/景点/游玩主题" class="header-input">
    <router-link  to="/city">
    <div class="header-right">
      <a class="city">{{this.city}}</a>
      <span><i class="iconfont icon-ico_arrows_unfold"></i></span>
    </div>
    </router-link>
  </div>
</template>
 <script>
  import { mapState, mapGetters } from 'vuex'
	export default {
		name: "HomeHeader",
    computed: {
      ...mapState(['city']),
    }
	}
</script>
<style lang="stylus" scoped>
 @import "~styles/varibles.styl"
.header
  display flex
  line-height .86rem
  background-color $bgColor
  color: #ffffff
  position relative
  .header-left
    width .50rem
    float left
    margin-left .1rem
    margin-top .05rem
    text-align center
    .icon-fanhui
      font-size .44rem
  .header-input
    flex 1
    height .64rem
    margin-top .18rem
    margin-left .2rem
    background #ffffff
    border-radius: .1rem
    font-family "Microsoft Yahei"
    padding-left .2rem
  .header-right
    width 100%
    margin-right .1rem
    float right
    color #ffffff
   .city
     color: #ffffff
     margin-left .25rem
     font-size .27rem
   span
     position: relative;
     top: -.02rem;
   .icon-ico_arrows_unfold
      font-size .24rem
</style>
